<template>
    <a
      v-bind:class="btnClass"
      v-on:click="buttonEvent"
    >{{title}}</a>
</template>
<style scoped>
.handleButton-a {
  background-color: #18ceb4;
  color: #ffffff;
  /* min-width: 50px; */
  height: 28px;
  line-height: 28px;
  /* border: 1px solid #18ceb4; */
  text-align: center;
  cursor: pointer;
  /* margin: 5px; */
  border-radius: 3px;
  padding: 0px 14px;
  box-sizing: border-box;
  margin-bottom:5px;
}
.plain{
  background: #ffffff;
  color: #18ceb4;
  border: 1px solid #18ceb4;
  /* box-sizing: border-box; */
  padding:0 13px;
}
.handleButton-a-disable {
  cursor: not-allowed;
  background-color: #e6e6e6;
  /* border: 1px solid #e6e6e6; */
}
</style>
<script>
//表格内操作按钮
export default {
  name: "handleButton",
  props: {
    disable: {
      default: false
    },
    plain: {
      type: Boolean,
      default: false
    },
    title: {
      default: ""
    }
  },
  meta: {
    descr: "行内操作按钮"
  },
  computed:{
    btnClass(){
      let className = 'handleButton-a';
      if (this.disable) {
        className += ' handleButton-a-disable'
      }
      if (this.plain) {
        className += ' plain'
      }
      return className
    }
  },
  methods: {
    buttonEvent: function() {
      var that = this;
      if (!that.disable) {
        that.$emit("click");
      }
    }
  }
};
</script>

